<template>
  <div>
    <div class="jvminfo">
      <el-row>
        <el-col :span="11" style="padding-left: 50px">
          <div class="cpu">
            <el-card class="cpu-card">
              <i class="el-icon-cpu"></i>
              <span>CPU</span>
              <el-divider></el-divider>
              <div class="cpu-group">
                <ul class="cpu-group-ul">
                  <li class="cpu-group-item">
                    <i>属性</i>
                    <span class="span-right">值</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="cpu-group-item">
                    <i>核心数</i>
                    <span class="span-right">{{
                      cpu.numberOfCores || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="cpu-group-item">
                    <i>用户使用率</i>
                    <span class="span-right">{{
                      cpu.userUtilization + "%" || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="cpu-group-item">
                    <i>系统使用率</i>
                    <span class="span-right">{{
                      cpu.systemUtilization + "%" || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="cpu-group-item">
                    <i>CPU使用率</i>
                    <span class="span-right">{{
                      cpu.usageRate + "%" || "-"
                    }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="13" style="padding-left: 50px; padding-right: 50px">
          <div class="ram">
            <el-card class="ram-card">
              <i class="el-icon-bank-card"></i>
              <span>内存</span>
              <el-divider></el-divider>
              <div class="ram-group">
                <ul class="ram-group-ul">
                  <li class="ram-group-item">
                    <span class="title">属性</span>
                    <span class="span-center">内存</span>
                    <span class="span-right">JVM</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="ram-group-item">
                    <span class="title">总内存</span>
                    <span class="span-center">{{
                      ram.totalMemory + "G" || "-"
                    }}</span>
                    <span class="span-right">{{
                      jvmRam.totalMemory + "M" || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="ram-group-item">
                    <span class="title">已用内存</span>
                    <span class="span-center">{{
                      ram.usedMemory + "G" || "-"
                    }}</span>
                    <span class="span-right">{{
                      jvmRam.usedMemory + "M" || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="ram-group-item">
                    <span class="title">剩余内存</span>
                    <span class="span-center">{{
                      ram.remainingMemory + "G" || "-"
                    }}</span>
                    <span class="span-right">{{
                      jvmRam.remainingMemory + "M" || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="ram-group-item">
                    <span class="title">使用率</span>
                    <span class="span-center">{{
                      ram.usageRate + "%" || "-"
                    }}</span>
                    <span class="span-right">{{
                      jvmRam.usageRate + "%" || "-"
                    }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="serverInformation">
      <el-row>
        <el-col :span="24" style="padding-left: 50px; padding-right: 50px">
          <div class="serverInformation">
            <el-card class="serverInformation-card">
              <i class="el-icon-monitor"></i>
              <span>服务器信息</span>
              <el-divider></el-divider>
              <div class="serverInformation-group">
                <ul class="serverInformation-group-ul">
                  <li class="serverInformation-group-item">
                    <span class="span-one">服务器名称</span>
                    <span class="span-two">{{
                      serverInformation.name || "-"
                    }}</span>
                    <span class="span-three">操作系统</span>
                    <span class="span-right">{{
                      serverInformation.operatingSystem || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="serverInformation-group-item">
                    <span class="span-one">服务器IP &nbsp;</span>
                    <span class="span-two">{{
                      serverInformation.ip || "-"
                    }}</span>
                    <span class="span-three">系统架构</span>
                    <span class="span-right">{{
                      serverInformation.systemStructure || "-"
                    }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="jvmInformation">
      <el-row>
        <el-col :span="24" style="padding-left: 50px; padding-right: 50px">
          <div class="jvmInformation">
            <el-card class="jvmInformation-card">
              <i class="el-icon-coffee-cup"></i>
              <span>Java虚拟机信息</span>
              <el-divider></el-divider>
              <div class="jvmInformation-group">
                <ul class="jvmInformation-group-ul">
                  <li class="jvmInformation-group-item">
                    <span class="span-one">Java名称</span>
                    <span class="span-two">{{
                      jvmInformation.javaName || "-"
                    }}</span>
                    <span class="span-three">Java版本</span>
                    <span class="span-right">{{
                      jvmInformation.javaVersion || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="jvmInformation-group-item">
                    <span class="span-one">启动时间</span>
                    <span class="span-two">{{
                      jvmInformation.startTime || "-"
                    }}</span>
                    <span class="span-three">运行时长</span>
                    <span class="span-right">{{
                      jvmInformation.runningTimeString || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="jvmInformation-group-item-j">
                    <span class="span-one">项目路径</span>
                    <span class="span-other">{{
                      jvmInformation.projectPath || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="jvmInformation-group-item-j">
                    <span class="span-one">jdk路径</span>
                    <span class="span-other">{{
                      jvmInformation.jdkPath || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="jvmInformation-group-item-j">
                    <span class="span-one">运行参数</span>
                    <span class="span-other">{{
                      jvmInformation.jvmArgs || "-"
                    }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="fileInfo">
      <el-row>
        <el-col :span="24" style="padding-left: 50px; padding-right: 50px">
          <div class="fileInfo">
            <el-card class="fileInfo-card">
              <i class="el-icon-s-order"></i>
              <span>磁盘状态</span>
              <el-divider></el-divider>
              <div class="fileInfo-group">
                <ul class="fileInfo-group-ul">
                  <li class="fileInfo-group-item">
                    <span>文件系统类型</span>
                    <span>总大小</span>
                    <span>已使用空间</span>
                    <span>剩余空间</span>
                    <span>使用率</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="fileInfo-group-item">
                    <span>{{ fileInfo.fileSysType || "-" }}</span>
                    <span>{{ fileInfo.total || "-" }}</span>
                    <span>{{ fileInfo.usable || "-" }}</span>
                    <span>{{ fileInfo.free || "-" }}</span>
                    <span>{{ fileInfo.usedRatio || "-" }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { jvmInfo } from "@/services/jvm";
export default {
  name: "ServiceMonitoring",

  data() {
    return {
      cpu: {},
      ram: {},
      jvmRam: {},
      serverInformation: {},
      jvmInformation: {},
      fileInfo: {},
    };
  },

  mounted() {
    this.getJvmInfo();
  },

  methods: {
    getJvmInfo() {
      jvmInfo()
        .then((res) => {
          this.cpu = res.data.cpu;
          this.ram = res.data.ram;
          this.jvmRam = res.data.jvmRam;
          this.serverInformation = res.data.serverInformation;
          this.jvmInformation = res.data.jvmInformation;
          this.fileInfo = res.data.fileInfo;
        })
        .catch((error) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.span-right {
  float: right;
}
.li-divider {
  margin-bottom: 14px;
  margin-top: 14px;
}
.ram-group-item {
  width: 100%;
  .title {
    display: inline-block;
    width: 50%;
    text-align: left;
  }
  .span-center {
    width: 20%;
    text-align: left;
  }
  .span-right {
    text-align: right;
  }
}
.serverInformation {
  margin-top: 10px;
}
.serverInformation-group-item {
  .span-one {
    display: inline-block;
    width: 30%;
    text-align: left;
  }
  .span-two {
    display: inline-block;
    width: 30%;
    text-align: left;
  }
  .span-three {
    display: inline-block;
    text-align: left;
  }
  .span-right {
    text-align: right;
  }
  .span-other {
    display: inline-block;
    width: 30%;
    text-align: left;
  }
}
.jvmInformation {
  margin-top: 10px;
}

.jvmInformation-group-item {
  .span-one {
    display: inline-block;
    width: 30%;
    text-align: left;
  }
  .span-two {
    display: inline-block;
    width: 30%;
    text-align: left;
  }
  .span-three {
    display: inline-block;
    text-align: left;
  }
  .span-right {
    text-align: right;
  }
}
.jvmInformation-group-item-j {
  display: flex;
  align-items: center;
  .span-one {
    width: 30%;
    text-align: left;
  }
  .span-other {
    flex: 5;
    text-align: left;
  }
}
.span-right {
  text-align: right;
}
.jvmInformation {
  margin-top: 10px;
}
.fileInfo {
  margin-top: 10px;
}

.fileInfo-group-ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .fileInfo-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  span {
    flex: 1;
  }
}
</style>